<template>
    <div style="display:none">
        <button v-print="print">打印</button>
        <div id="printArea">
            <div class="printPage">
                <div class="billTitle">
                    <h3>{{factoryInfo.name}}</h3>
                    <div class="tel">
                        <span style="margin-right:20px">电话：{{factoryInfo.currentMobile}}</span>
                        <span>地址：{{factoryInfo.address}}</span>
                    </div>
                </div>
                <h3 style="text-align:center;margin-bottom:5px">出库单</h3>
                <div class="billInfo">
                    <div class="row-info">
                        <div class="auto">
                            <div class="item-info">
                                <span class="label">单号：</span>
                                <span>{{mouldInfo.code}}</span>
                            </div>
                            <div class="item-info">
                                <span class="label">日期：</span>
                                <span>{{new Date().dateFormat('yyyy-MM-dd')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tableContainer">
                    <table>
                        <tr>
                            <td>品名</td>
                            <td>规格</td>
                            <td>数量</td>
                            <td>单位</td>
                            <td>单价</td>
                            <td>总价</td>
                            <td>备注</td>
                        </tr>
                        <tr v-for="item in mouldInfo.productList" :key="item.id">
                            <td>{{item.productName}}</td>
                            <td>{{item.productSpecification}}</td>
                            <td>{{item.handleNum}}</td>
                            <td>{{item.unit}}</td>
                            <td>{{item.unitPrice}}</td>
                            <td>{{item.totalPrice}}</td>
                            <td class="notes">{{item.comment}}</td>
                        </tr>
                        <tr>
                            <td>合计金额(大写)</td>
                            <td colspan="6">
                                <div class="pay">
                                    <span>{{utils.digitUppercase(getTotalPrice)}}</span>
                                    <span>￥：{{getTotalPrice}}元</span>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div>注：以上物品请核对数量，如有质量问题，请在收货后3天内通知本公司，逾期恕不负责。</div>
                    <div>此出货单拍照，复印，扫描件视为同等有效。</div>
                    <div class="footer">
                        <div class="item-info">
                            <span class="label">制单人：</span>
                            <span>{{account}}</span>
                        </div>
                        <div class="item-info">
                            <span class="label">审核人：</span>
                            <span></span>
                        </div>
                        <div class="item-info">
                            <span class="label">收货单位：</span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import print from '@/utils/print.js'
    export default {
        data() {
            return {
                print,
            }
        },
        computed: {
            ...mapState(["factoryInfo","account"]),
            getTotalPrice(){
                return this.mouldInfo.productList.reduce(
                    (previousValue, currentValue) => previousValue + currentValue.totalPrice, 0)
            }
        },
        props: {
            mouldInfo: {
                type: Object,
                default: () => ({})
            }
        }
    }
</script>

<style lang="less" scoped>
    #printArea {
        height: 100%;

        h3 {
            font-weight: bold;
        }

        color: #000;

        .billTitle {
            text-align: center;
        }

        .billInfo,
        .tableContainer {

            .auto,
            .footer {
                width: 80%;
                margin: 0 auto;
                display: flex;
                align-items: center;
                margin-bottom: 5px;

                .item-info {
                    flex: 1;
                }
            }

            .footer {
                width: 100%;
                margin-top: 10px;
            }
        }

        .tableContainer {
            width: 80%;
            margin: 0 auto;

            table {
                border-collapse: collapse;
                width: 100%;

                .pay {
                    display: flex;
                    justify-content: space-between;
                }
            }

            table,
            td,
            th {
                border: 1px solid #000;
                text-align: center;
                padding: 4px 8px;
            }
        }
    }

    @media print {
        .printPage {
            height: 100%;

            table {
                td:not(.notes) {
                    white-space: nowrap;
                }
            }
        }
    }
</style>